import 'package:flutter/material.dart';

class ChipDemo extends StatefulWidget {
  ChipDemo({Key key}) : super(key: key);

  @override
  _ChipDemoState createState() => _ChipDemoState();
}

class _ChipDemoState extends State<ChipDemo> {

  List<String> _tags = <String> [
    "Apple",
    "Banana",
    "Orange"
  ];
  String _action = "Nothing";
  List<String> _selected = [];
  String _choice = "Lemon";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ChipDemo"),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Wrap(
              spacing: 16.0, // 设置小部件之间的间隔
              runSpacing: 16.0, // 设置每行小部件之间的间隔
              children: [
                Chip(
                  label: Text("Life"),
                ),
                Chip(
                  label: Text("Sunset"),
                  backgroundColor: Colors.orange,
                ),
                Chip(
                  label: Text("Flutter"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.grey,
                    child: Text("F"),
                  ),
                ),
                Chip(
                  label: Text("Flutter"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.grey,
                    child: Text("F"),
                  ),
                ),
                Chip(
                  label: Text("Flutter"),
                  avatar: CircleAvatar(
                    backgroundColor: Colors.orange,
                    child: Text("F"),
                  ),
                ),
                Chip(
                  label: Text("City"),
                  onDeleted: () { // 添加删除按钮
                    
                  },
                  deleteIcon: Icon(Icons.delete), // 设置自定义的删除小图标
                  deleteIconColor: Colors.green, // 设置自定义小图标的颜色
                  deleteButtonTooltipMessage: "Remove this tag.", // 删除小按钮提示信息
                ),
                Divider(
                  color: Colors.grey, // 分隔符的颜色
                  height: 10.0, // 分隔符的高度
                  indent: 10.0, // 设置分隔符的缩进
                ), // 分隔符小部件
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) => Chip(
                      label: Text(tag),
                      onDeleted: () {
                        setState(() {
                          _tags.remove(tag);
                        });
                      },
                    )
                  ).toList(),
                ),
                Divider(
                  color: Colors.grey, // 分隔符的颜色
                  height: 10.0, // 分隔符的高度
                  indent: 10.0, // 设置分隔符的缩进
                ), // 分隔符小部件
                Container(
                  width: double.infinity,
                  child: Text("ActionChip: $_action"),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) => ActionChip(
                      label: Text(tag),
                      onPressed: () {
                        setState(() {
                          _action = tag;
                        });
                      },
                    )
                  ).toList(),
                ),
                Divider(
                  color: Colors.grey, // 分隔符的颜色
                  height: 10.0, // 分隔符的高度
                  indent: 10.0, // 设置分隔符的缩进
                ), // 分隔符小部件
                Container(
                  width: double.infinity,
                  child: Text("FilterChip: ${_selected.toString()}"),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) => FilterChip(
                      label: Text(tag),
                      selected: _selected.contains(tag),
                      onSelected: (value) {
                        setState(() {
                          if (_selected.contains(tag)) {
                            _selected.remove(tag);
                          } else {
                            _selected.add(tag);
                          }
                        });
                      },
                    )
                  ).toList(),
                ),
                Divider(
                  color: Colors.grey, // 分隔符的颜色
                  height: 10.0, // 分隔符的高度
                  indent: 10.0, // 设置分隔符的缩进
                ), // 分隔符小部件
                Container(
                  width: double.infinity,
                  child: Text("ChoiceChip: ${_choice.toString()}"),
                ),
                Wrap(
                  spacing: 8.0,
                  children: _tags.map(
                    (tag) => ChoiceChip(
                      label: Text(tag),
                      selected: _choice == tag,
                      selectedColor: Colors.black,
                      onSelected: (value) {
                        setState(() {
                          _choice = tag;
                        });
                      },
                    )
                  ).toList(),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.restore),
        onPressed: () {
          setState(() {
            _tags = [
              "Apple",
              "Banana",
              "Orange",
            ];

            _action = "Nothing";
            _selected = [];
            _choice = "Lemon";
          });
        },
      ),
    );
  }
}